<template>
    <ul class="customer_list">
        <li class="customer_list_li" v-for="(item, index) in data" :key="item.id" :style="getStyle(index)" :ref="'li' + index">
            <div class="li_item">{{ item.datetime }}</div>
            <div class="li_item">{{ item.name }}</div>
            <div class="li_item">{{ item.type }}</div>
            <div class="li_item">{{ item.des }}</div>
            <div class="li_item">{{ item.act }}</div>
        </li>
    </ul>
</template>

<script>
let timer = null
export default {
    props: {
      data: Object
    },
    methods: {
        getStyle (index) {
            return {
                top: index * 30 + 'px'
            }
        }
    },
    mounted () {
        if (this.data.length > 5) {
            const length = this.data.length
            const liElements = this.data.map((_, index) => this.$refs['li' + index])
            timer = setInterval(() => {
                liElements.forEach(item => {
                    let top = parseInt(item[0].style.top)
                    top = top - 1
                    if (top < -30) {
                        top = (length - 1) * 30
                    }
                    item[0].style.top = top + 'px'
                })
            }, 100)
        }
    },
    unmounted () {
        if (timer) {
        clearInterval(timer)
    }
    }
}
</script>
<style scoped>
.customer_list {
    color: #fff;
    height: 150px;
    font-size: smaller;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-right: 30px;
    margin-left: 30px;
}
.customer_list_li {
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    display: flex;
    justify-content: space-between;
    color: #1af7ff;
}
.li_item{
    width: 18%;
}
</style>
